<template>
  <div class="overview-content">
    <!---->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <div class="divUl">
            <el-button class="myBnt" @click="show = true">人工添加</el-button>
            <ul class="flex-row ulMy">
              <li v-for="(item,index) in yzArr" :key="index" :class="item.type!=0 ? 'not':''">
                <i>{{ item.newcreatedTime }}</i>
                <div>
                  <div style="padding:0;margin-left:0">
                    <h5>
                      <em class="acy">
                        <i style="color:#151515;font-size:13px;" :class="item.createdBy == '系统'?'ccc':''">{{ item.createdBy }}</i>
                        {{ item.remindNames.length >= 1? item.remindNames.join(" "):'' }}
                      </em>
                      <span v-if="item.createdBy != '系统'&&item.executeTime!= item.createdTime">执行时间:{{ dateFormat(item.executeTime) }}</span>
                      <p :class="item.createdBy == '系统'?'ccc1':''">{{ item.remark }}</p>
                    </h5>
                    <p>
                      <dfn v-for="(list,listindex) in item.attachmentNames" v-if="item.attachmentNames && item.attachmentNames.length > 0" :key="listindex" style="cursor: pointer;" class="ulMy" @click="openPng(index,listindex)">
                        <el-tooltip class="item" effect="dark" :content="list" placement="top-start">
                          <dfn class="listStyle">{{ list }}</dfn>
                        </el-tooltip>
                      </dfn>
                      <!-- <dfn style="cursor: pointer;" @click="openPng(item.attachment)" class="ulMy" v-if="item.attachmentNames && item.attachmentNames.length > 0">{{item.attachmentNames.join(",")}}</dfn> -->
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog title="" width="770px" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show">
      <h2>添加记录 <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div>
        <el-form ref="form" :model="sizeForm" label-width="85px" class="formDiv">
          <el-form-item label="记录内容:" :required="true">
            <el-input
              v-model="sizeForm.textarea"
              type="textarea"
              placeholder="请输入内容"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="附件:">
            <DragImage v-if="show" v-model="sizeForm.fileUrl" class="myUnip" :urls="sizeForm.fileUrl" maxcount="10" format="png,pdf,jpg,jpeg,mp4" :houseid="houseid" @getImage="changePoster" />
          </el-form-item>
          <el-form-item label="提醒:">
            <el-checkbox-group v-model="sizeForm.checkList">
              <el-checkbox v-for="(item,index) in arr" :key="index" :label="item.id">{{item.englishName!=''?item.englishName:item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!---->
          <el-form-item label="执行时间:">
            <el-date-picker
              v-model="executeTime"
              type="date"
              format="yyyy-MM-dd"
              placeholder="无"
              style="width:260px"
            />
          </el-form-item>
          <!---->
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="disabled" @click="save()">确 认</el-button>
        <el-button class="grey-btn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
    <!---->
  </div>
</template>

<script>
import { listByRole, saveTimeLine, getTimeLine } from '@/api/manager'
import DragImage from '@/components/Upload/DragImage'
import { getFileList, dateFormat } from '@/utils/common'
export default {
  components: {
    DragImage
  },
  data() {
    return {
      dateFormat,
      active: 0,
      executeTime: undefined,
      show: false,
      textarea: null,
      checkList: [],
      ownerList: [],
      ownerListTwo: [],
      arr: [],
      sizeForm: {
        type: 0,
        fileUrl: '',
        checkList: []
      },
      postForm: {},
      listImgXq: [],
      fileUrl: [],
      houseid: '',
      obj: {
        businessId: '',
        type: 0
      },
      yzArr: [],
      disabled: true
    }
  },
  watch: {
    sizeForm: {
      handler(newVal, oldVal) {
        if (newVal.textarea) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  mounted() {
    this.init()
    this.initAtt()
    this.houseid = this.$route.query.id
  },
  methods: {
    initAtt() {
      this.arr = []
      listByRole(1).then(response => {
        this.arr = this.arr.concat(response.data)
      })
      listByRole(2).then(response => {
        this.arr = this.arr.concat(response.data)
      })
    },
    init() {
      this.obj.businessId = this.$route.query.id
      getTimeLine(this.obj).then(response => {
        response.data.forEach((item) => {
          if (item.attachmentNames && item.attachmentNames.length > 1) {
            item.attachmentNames = [...(item.attachmentNames)]
            item.attachment = [...(item.attachment.split(','))]
          }
          item.newcreatedTime = this.formatDate(item.createdTime)
          if (item.remindNames != null && item.remindNames.length >= 1) {
            item.remindNames = item.remindNames.map((list) => {
              return list = '@' + list
            })
          } else {
            item.remindNames = []
          }
        })

        this.yzArr = response.data
      })
    },
    tab(v) {
      this.active = v
    },
    openPng(val, listval) {
      if (typeof this.yzArr[val].attachment === 'string') {
        window.open(this.yzArr[val].attachment, '_blank')
      } else {
        window.open(this.yzArr[val].attachment[listval], '_blank')
      }
    },
    save() {
      if (this.sizeForm.textarea == null) {
        this.$notify({
          title: '失败',
          message: '请添加必填项',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.sizeForm.attachment = this.sizeForm.fileUrl
      this.sizeForm.businessId = this.houseid
      this.sizeForm.remark = this.sizeForm.textarea
      this.sizeForm.remindId = this.sizeForm.checkList.join(',')
      this.sizeForm.type = 0
      if (this.executeTime != undefined) {
        this.sizeForm.executeTime = new Date(this.executeTime).getTime()
      }
      saveTimeLine(this.sizeForm).then(response => {
        this.show = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        //  this.sizeForm  ={}
        this.sizeForm.fileUrl = ''
        this.sizeForm.checkList = []
        this.sizeForm.remindId = null
        this.sizeForm.remark = null
        this.sizeForm.textarea = null
        this.sizeForm.type = 0
        this.sizeForm.attachment = null
        this.executeTime = undefined
        this.init()
      })
    },
    close() {
      this.show = false

      this.sizeForm.fileUrl = ''
      this.sizeForm.checkList = []
      this.sizeForm.remindId = null
      this.sizeForm.remark = null
      this.sizeForm.textarea = null
      this.sizeForm.type = 0
      this.sizeForm.attachment = null
    },
    changePoster(val, status, name) {
      this.sizeForm.fileUrl = val.toString()

      return
      if (status == 'add') {
      //  this.sizeForm.fileUrl.push(val.toString())

      } else {
        this.sizeForm.fileUrl.forEach((item, index) => {
          if (item.indexOf(name) > -1) this.sizeForm.fileUrl.splice(index, 1)
        })
      }
    },
    formatDate(date) {
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD + ' ' + hh + mm + ss
    }
  }
}
</script>

<style lang="scss" scoped>
.listStyle{width: 100%;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-bottom: 1px;}
.myBnt{color: #5AC6B7;display: block;width: 100px;margin-left: 148px;margin-bottom: 20px;border: 0;}
.divUl{width: 854px;margin: 20px auto 0 auto;}
h5,p{padding: 0;margin: 0;}
.ulMy{flex-wrap: wrap;width: 854px;}
.ulMy li{width: 100%;display: flex;align-items: center;margin-bottom: 15px;}
.ulMy li i{color: #6a6a6a;font-size: 13px;align-self: self-start;margin-top: 23px;flex: .2;text-align: right;}
.ulMy li p{color: #6a6a6a;font-size: 12px;}
.ulMy li h5{font-size: 16px;color: #151515;margin-bottom: 10px;text-align: left!important;position: relative;font-weight: normal;}
.ulMy li h5 span{font-size:12px;position: absolute;top: 0;right: 0;color: #101010;font-weight: normal;}
.ulMy li div{background: #fff;margin-left: 15px;flex: 1;padding: 20px;box-sizing: border-box;border-radius: 2px;white-space: normal;
    word-break: break-all;}
.ulMy li em{color: #5AC6B7;margin-left: 0px;width: 80%;
    display: inline-block;
    font-size: 13px;font-weight: bold;}
.ulMy li dfn{color: #5AC6B7;margin-top: 5px;font-size: 12px;width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-right: 15px;padding-bottom: 1px;}
.ulMy li.not{color: #ccc;}
.ulMy li.not h5{font-size: 16px;color: #ccc;margin-bottom: 10px;}
.ulMy li.not div{background: #fff;margin-left: 15px;flex: 1;padding: 20px;box-sizing: border-box;border-radius: 2px;}
.ulMy li.not p{color: #ccc;}
.overview-content{min-height: calc(100vh - 160px);background: #eee;}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.formDiv{padding-left: 39px;padding-right: 39px;}
.divSE{text-align: center;}
.divSE em{display: block;}
.fileWD{font-size: 46px;color: #5AC6B7;}
.ulMy li h5 i{text-align: left!important;}
.ulMy li h5 p{margin-top: 10px;}
::v-deep .myUnip ul{width: 200px;}
.ccc{color: #ccc!important;}
.ccc1{color: #ccc!important;font-size: 12px!important;}
</style>

